<template>
  <div class="h-full flex flex-col">
    <!-- 固定的Header区域 -->
    <div class="flex justify-between items-center pb-4 px-4 bg-white border-b border-gray-200 flex-shrink-0">
      <h3 class="text-xl font-semibold">{{ title }}</h3>
      <n-button type="primary" secondary @click="emit('edit')">编辑</n-button>
    </div>
    
    <!-- 可滚动的内容区域 -->
    <div class="flex-1 min-h-0 overflow-auto p-4">
      <slot name="display"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { NButton } from 'naive-ui'

defineProps({
  title: { type: String, required: true },
})

const emit = defineEmits(['edit'])
</script>